<template>
    <div>
      <el-form ref="" :model="formFileds">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item>
              <el-input></el-input>
            </el-form-item>
          </el-col>
  
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary">
                查询
              </el-button>
              <el-button type="primary" @click="add()">
                增加
              </el-button>
              <el-button type="danger" @click="deleteAll()">
                批量删除
              </el-button>
            </el-form-item>
          </el-col>
  
        </el-row>
      </el-form>
  
      <!--表格内容-->
      <el-table
        ref="carouselChartForm"
        :data="tableData"
        style="width: 100%; margin-bottom: 5px"
        border
        stripe
        highlight-current-row
        :default-sort="{ prop: 'date', order: 'descending' }"
        @row-click="handleRowClick"
        @select-all="handleCheckedAllAndCheckedNone"
        @select="handleCheckedAllAndCheckedNone"
        :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}"
      >
        <el-table-column fixed type="selection" align="center">
        </el-table-column>
        <el-table-column property="name" label="名称">
        </el-table-column>
        <el-table-column property="fbzt" label="发布状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.fbzt" @change="handleChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column property="introduction" label="简介">
        </el-table-column> -->
        <el-table-column property="cover" label="封面">
          <template slot-scope="scope">
            <img :src="scope.row.cover" style="width: 150px; height: 100px;"/>
          </template>
        </el-table-column>
  
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button

              type="primary"
              title="编辑"
              size="small"
              @click="rowEdit(scope.row)"
            >编辑</el-button>
            <el-button

              type="danger"
              title="删除"
              size="small"
              @click="rowDel(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
  
  
      </el-table>
      <!--分页-->
      <el-pagination :page-sizes="[10, 20, 30, 40, 100]" :page-size=this.pageSize :total=this.total :current-page="currentPage" 
    layout="total, sizes, prev, pager, next, jumper" @current-change="getCurrentPage" @size-change="getSize">
    </el-pagination>

      <Edit v-if="isShowEditDialog" :isShowEditDialog="isShowEditDialog"
        @dialogClose="dialogClose"
        :rowData="rowData"></Edit>
      <Add v-if="isShowAddDialog" :isShowAddDialog="isShowAddDialog"  @dialogClose="dialogClose"></Add>
    </div>
  </template>
      
    <script>
    import Edit from "./carouselChartEdit";
    import Add from "./carouselChartAdd";
    import { getCarouselAll,delCarousel,editCarousel } from '@/api/systemAdministrator/carouselChartManage';
    export default {
    name: "SceneBidder",
    components: {
      Edit,
      Add,
    },
    data() {
      return {
        pageSize: 10,
        total: 0,
        currentPage: 1,
        formFileds: {},
        rowData: {},
        tableData: [
          
        ],
        isShowEditDialog: false,
        isShowAddDialog: false,
        
      };
    },
    methods: {
      getCurrentPage(currentPage){
        // console.log(currentPage);
        this.currentPage = currentPage;
        this.getAll();
      },
      getSize(pageSize){
        // console.log(pageSize);
        this.pageSize = pageSize;
        this.getAll();
      },
      handleRowClick(row, event, column) {
        // 仅选中当前行
        // this.setCurRowChecked(row);
      },
      handleCheckedAllAndCheckedNone(selection) {
        // 当前选中仅一行时操作-（当前表格行高亮）
        // 1 != selection.length && this.$refs.list.setCurrentRow();
      },
      dialogClose() {
        this.isShowEditDialog = false;
        this.isShowAddDialog = false;
        this.getAll();
      },
      submitData(){
        console.log('提交');
      },
      add(){
        this.isShowAddDialog = true;
      },
      rowEdit(row) {
        // //当前选中行
        this.rowData = row;
        this.isShowEditDialog = true;
      },
      rowDel(row) {
        // 让当前删除按钮失焦
        // event.target.blur();

        console.log('row',row);
        this.$confirm("确定要删除当前行吗？", "删除", {
          comfirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          let data = row.id;
          
          delCarousel(data).then((res) => {
            if(res){
              this.$message.success("删除成功");

              this.getAll();
            }
          })
          // this.tableData.splice(row.id, 1);
        });
      },
      deleteAll() {
        this.$confirm("确定要删除这些行吗？", "删除", {
          comfirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(() => {
          this.$message.success("删除成功");
          return false;
        });
      },
      // 选中当前行-当前行的复选框被勾选
      setCurRowChecked(row) {
        // this.$refs.list.clearSelection();
        // this.$refs.list.toggleRowSelection(row);
      },
      getAll(){
        let data = 'pageno=' + this.currentPage + '&countonepage=' + this.pageSize;
        getCarouselAll(data).then((res) => {
          console.log(res.data);
          this.tableData = res.data.list;
          this.total = res.data.total;
          for(let item of this.tableData){
            if(item.fbzt == '已提交'){
              item.fbzt = true;
            }
            else{
              item.fbzt = false;
            }
          }
        })
      },
      handleChange(row){
        let data = Object.assign(row, {});
        if(data.fbzt == true){
          data.fbzt = '已提交';
        }
        else{
          data.fbzt = '未提交';
        }
        editCarousel(data).then((res) => {
          if(res){
            console.log(res);
            this.getAll();
          }
        })
      },
    },
    mounted(){
      this.getAll();
    },
  };
  </script>
      
    <style scoped lang="less">
  .el-form {
    padding: 0 10px;
  }
  
  .el-date-editor {
    width: 100% !important;
  }
  </style>
      